<template>
  <div class="sjplatformAdd">
    <el-form label-width="100px">
      <el-form-item label="姓名：">
        <el-input v-model="userStore.userModel.realName" />
      </el-form-item>
      <el-form-item label="登录账号：">
        <el-input v-model="userStore.userModel.loginName" />
      </el-form-item>
      <el-form-item label="密码：" v-if="!userStore.userModel.id">
        <el-input type="password" v-model="userStore.userModel.password" />
      </el-form-item>
      <el-form-item label="所属机构：">
        <el-tree-select
          v-model="userStore.userModel.orgName"
          :data="orgTreeData"
          check-strictly
          :render-after-expand="false"
          @node-click="handleNodeClick"
          placeholder="请选择..."
        />
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="userStore.userModel.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期：">
        <el-date-picker
          v-model="userStore.userModel.birthday"
          type="date"
          placeholder="选择出生日期"
        />
      </el-form-item>
      <el-form-item label="是否启用：">
        <el-checkbox v-model="isUserUsed" label="启用" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useOrgTree } from "../../../hooks/SystemManager/Org/useOrgTree";
import { useUserStore } from "../../../store/useUserStore";

const userStore = useUserStore();

//是否启用
const isUserUsed = computed({
  get() {
    return userStore.userModel.isUsed === 1;
  },
  set(value) {
    userStore.userModel.isUsed = value ? 1 : 0;
  },
});

// 机构树
const { data, fetchData } = useOrgTree();
fetchData(); // 调用数据获取方法
const orgTreeData = data;

const handleNodeClick = (node) => {
  userStore.userModel.orgId = node.id;
  userStore.userModel.orgName = node.label;
};
</script>